<template>
  <div class="question-item" :class="{ 'is-learned': question.isLearned }">
    <div class="question-header">
      <div class="question-meta">
        <div class="question-text">{{ question.question }}</div>
        <el-tooltip 
          :content="formatDetailTime(question.createTime)"
          placement="top"
        >
          <span class="question-create-time">
            <el-icon><Clock /></el-icon>
            {{ formatTime(question.createTime) }}
          </span>
        </el-tooltip>
      </div>
      <div class="question-actions">
        <div class="difficulty-rating">
          <el-rate
            v-model="question.difficulty"
            :colors="difficultyColors"
            @change="updateDifficulty"
          />
        </div>
        <div class="action-buttons">
          <el-button
            :type="question.isLearned ? 'success' : 'default'"
            size="small"
            class="learn-button"
            @click="toggleLearned"
          >
            <el-icon class="button-icon">
              <Check v-if="question.isLearned"/>
              <Edit v-else/>
            </el-icon>
            {{ question.isLearned ? "已学习" : "学习中" }}
          </el-button>
          <div 
            class="collect-button"
            :class="{ 'is-collected': question.isCollected }"
            @click="toggleCollect"
          >
            <el-icon class="star-icon">
              <Star />
            </el-icon>
          </div>
          <slot name="extra-actions"></slot>
        </div>
      </div>
    </div>
    
    <div class="answer-content">
      <div class="markdown-content">
        <Editor
          :defaultConfig="editorConfig"
          :defaultHtml="formatAnswer(question.answer)"
          :mode="'default'"
          :style="{height: 'auto', minHeight: '200px'}"
        />
      </div>
    </div>

    <div class="question-footer">
      <div class="tags-section">
        <el-tag
          v-for="tag in (question.keywords || '').split(',')"
          :key="tag"
          :type="randomTagType()"
          class="topic-tag"
          @click="$emit('tag-click', tag.trim())"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Clock, Check, Edit, Star } from '@element-plus/icons-vue'
import { formatRelativeTime, formatDetailTime } from '@/utils/timeFormat'
import '@wangeditor/editor/dist/css/style.css'
import { Editor } from '@wangeditor/editor-for-vue'

const props = defineProps({
  question: {
    type: Object,
    required: true
  }
})

const emit = defineEmits([
  'update-difficulty',
  'toggle-learned',
  'toggle-collect',
  'tag-click'
])

// 编辑器配置
const editorConfig = {
  readOnly: true,
  autoFocus: false,
  scroll: false,
  MENU_CONF: {
    codeBlock: {
      languageList: [
        { text: 'Java', value: 'java' },
        { text: 'JavaScript', value: 'javascript' },
        { text: 'HTML', value: 'html' },
        { text: 'CSS', value: 'css' },
        { text: 'Python', value: 'python' },
        { text: 'SQL', value: 'sql' },
        { text: 'Bash', value: 'bash' },
        { text: 'Plain Text', value: 'plaintext' }
      ]
    }
  }
}

// 格式化答案内容
const formatAnswer = (answer) => {
  if (!answer) return ''
  
  // 处理代码块，直接返回原始内容让wangEditor处理
  let formattedContent = answer.replace(/```(\w*)([\s\S]*?)```/g, (match, language, code) => {
    language = language.trim() || 'plaintext'
    code = code.trim()
    return `<pre><code class="language-${language}">${code}</code></pre>`
  })

  // 处理行内代码
  formattedContent = formattedContent.replace(/`([^`]+)`/g, (match, code) => {
    return `<code>${code}</code>`
  })

  // 处理标题
  formattedContent = formattedContent
    .replace(/^##### (.*$)/gm, '<h5>$1</h5>')
    .replace(/^#### (.*$)/gm, '<h4>$1</h4>')
    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
    .replace(/^# (.*$)/gm, '<h1>$1</h1>')

  return formattedContent
}

// 工具函数
const formatTime = (time) => formatRelativeTime(time)
const difficultyColors = ['#67C23A', '#E6A23C', '#F56C6C']

const randomTagType = () => {
  const types = ['', 'success', 'warning', 'info']
  return types[Math.floor(Math.random() * types.length)]
}

// 事件处理
const updateDifficulty = () => {
  emit('update-difficulty', props.question)
}

const toggleLearned = () => {
  emit('toggle-learned', props.question)
}

const toggleCollect = () => {
  emit('toggle-collect', props.question)
}
</script>

<style scoped>
.question-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
}

.question-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.question-item.is-learned {
  border-left: 4px solid #67C23A;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.question-meta {
  flex: 1;
}

.question-text {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.question-create-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #909399;
}

.question-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.difficulty-rating :deep(.el-rate) {
  display: inline-flex;
  height: 20px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.learn-button {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.learn-button:hover {
  transform: scale(1.05);
}

.collect-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f4f4f5;
}

.collect-button:hover {
  transform: scale(1.1);
  background: #fdf6ec;
}

.collect-button.is-collected {
  background: #fdf6ec;
}

.collect-button .star-icon {
  font-size: 16px;
  color: #909399;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collect-button.is-collected .star-icon {
  color: #e6a23c;
  transform: scale(1.1);
}

.answer-content {
  margin-top: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.question-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-tag {
  cursor: pointer;
  transition: all 0.2s ease;
}

.topic-tag:hover {
  transform: scale(1.05);
}

:deep(.w-e-text-container) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.w-e-text-container [data-slate-editor]) {
  padding: 0 !important;
}

:deep(.w-e-toolbar) {
  display: none !important;
}
</style> 